<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #ggl {
            border:1px solid #ccc;
            position: absolute;
            left:0;
            top:0
        }

        .txt {
            position: absolute;
            left: 0;
            top: 0;
            width:600px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: -1;
        }
    </style>
</head>
<body>
    <!-- 灰度蒙层 -->
    <canvas id="ggl" width="600" height="100"></canvas>
    <!-- 文字中奖区 -->
    <div class="txt">恭喜你中了500万！！</div>
</body>
<script>
    const ggl=document.querySelector('#ggl')
    const context=ggl.getContext('2d')

    //填充灰度
    context.fillStyle='#ccc';
    
    context.fillRect(0,0,ggl.width,ggl.height);

    //绘制文本
    context.fillStyle='#fff';
    context.font='30px sans-serif';
    context.textAlign='center';
    context.fillText('刮一刮有惊喜！', ggl.width/2, ggl.height/1.44);

    //鼠标按下
    ggl.addEventListener('mousedown',downFn,false)
    ggl.addEventListener('mousemove',moveFn,false)
    ggl.addEventListener('mouseup',upFn,false)

    let isDraw=false

    //鼠村按下
    function downFn(e) {
        isDraw=true;
    }

    function moveFn(e) {
       
        if(isDraw) {
            //进行拖拽
           
         const x=e.clientX-ggl.offsetLeft
         const y=e.clientY-ggl.offsetTop

          //使用小圆arc模拟橡皮
          context.beginPath();
          console.log('鼠标移动1:',x)
             console.log('鼠标移动:',y)
          context.globalCompositeOperation='destination-out';
          
          context.fillStyle='#f00';
          context.arc(x, y, 6, Math.PI / 180 * 0, Math.PI / 180 * 360, false);
          context.fill();
        
        }
    }

    function upFn(e) {
        isDraw=false
    }

</script>
</html>